<template>
  <div style="padding: 0 20px;">
    <el-tabs v-model="activeName">
      <el-tab-pane label="css" name="css">
        <ul class="icon-list">
          <li class="icon-item" v-for="(item, index) in iconJson.css" :key="index">
            <div class="icon"><i :class="item"></i></div>
            <div class="name">{{ item }}</div>
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="svg" name="svg">
        <ul class="icon-list">
          <li class="icon-item" v-for="(item, index) in iconJson.svg" :key="index">
            <div class="icon"><SvgIcon class="icon-svg" :name="item"/></div>
            <div class="name">{{ item }}</div>
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts" setup>
import SvgIcon from '@/components/SvgIcon.vue'
import iconJson from '@/assets/font/icons.json'
import {ref} from 'vue'
const activeName = ref('css')
</script>
<style lang="scss" scoped>
.icon-list {
  display: flex;
  flex-wrap: wrap;
  color: #666;
  .icon-item {
    margin-top: 10px;
    .icon {
      font-size: 20px;
    }
    .icon-svg {
      width: 20px;
      height: 20px;
    }
    margin-right: 20px;
    text-align: center;
  }
}
</style>
